<!DOCTYPE html>
<html lang="en">

<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>商品销量和库存数据图</title>
  <style>
    #salesChart,
    #stockChart {
      width: 800px;
      height: 600px;
      margin: 20px;
    }

    .button-container {
      margin: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    button {
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #0056b3;
    }

    button:active {
      background-color: #004085;
    }
  </style>
</head>

<body>
<div class="button-container">
  <!-- 后续通过 JavaScript 动态生成按钮 -->
</div>
<div id="salesChart"></div>
<div id="stockChart"></div>

<script src="echarts-all.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 基于准备好的dom，初始化echarts实例
  var salesChart = echarts.init(document.getElementById('salesChart'));
  var stockChart = echarts.init(document.getElementById('stockChart'));

  // 发送 AJAX 请求获取数据
  $.ajax({
    url: 'product/salesAndStocks',
    method: 'GET',
    success: function (data) {
      if (data.code === 200) {
        // 提取数据
        var products = data.data.products;
        // 根据商品类型分组
        var groupedData = {};
        products.forEach(function (product) {
          var category = product.productcategory || product.productcategory2;
          if (!groupedData[category]) {
            groupedData[category] = {
              productNames: [],
              sales: [],
              stocks: []
            };
          }
          groupedData[category].productNames.push(product.productname);
          groupedData[category].sales.push(product.sales);
          groupedData[category].stocks.push(product.stock);
        });

        // 获取商品类型列表
        var productTypeList = Object.keys(groupedData);

        // 生成切换按钮
        var buttonContainer = document.querySelector('.button-container');
        for (var i = 0; i < productTypeList.length; i++) {
          var button = document.createElement('button');
          button.textContent = productTypeList[i];
          button.addEventListener('click', (function (index) {
            return function () {
              var type = productTypeList[index];
              var groupProductNames = groupedData[type].productNames;
              var groupSales = groupedData[type].sales;
              var groupStocks = groupedData[type].stocks;

              // 销量数据图配置项
              var salesOption = {
                title: {
                  text: '商品销量 - ' + type
                },
                tooltip: {},
                legend: {
                  data: ['销量']
                },
                xAxis: {
                  data: groupProductNames,
                  axisLabel: {
                    rotate: 45 // 让标签倾斜 45 度
                  }
                },
                yAxis: {},
                series: [
                  {
                    name: '销量',
                    type: 'bar',
                    data: groupSales
                  }
                ]
              };

              // 库存数据图配置项
              var stockOption = {
                title: {
                  text: '商品库存 - ' + type
                },
                tooltip: {},
                legend: {
                  data: ['库存']
                },
                xAxis: {
                  data: groupProductNames,
                  axisLabel: {
                    rotate: 45 // 让标签倾斜 45 度
                  }
                },
                yAxis: {},
                series: [
                  {
                    name: '库存',
                    type: 'bar',
                    data: groupStocks
                  }
                ]
              };

              // 使用刚指定的配置项和数据显示图表
              salesChart.setOption(salesOption);
              stockChart.setOption(stockOption);
            };
          })(i));
          buttonContainer.appendChild(button);
        }

        // 默认显示第一组数据
        if (productTypeList.length > 0) {
          var firstType = productTypeList[0];
          var groupProductNames = groupedData[firstType].productNames;
          var groupSales = groupedData[firstType].sales;
          var groupStocks = groupedData[firstType].stocks;

          // 销量数据图配置项
          var salesOption = {
            title: {
              text: '商品销量 - ' + firstType
            },
            tooltip: {},
            legend: {
              data: ['销量']
            },
            xAxis: {
              data: groupProductNames,
              axisLabel: {
                rotate: 45 // 让标签倾斜 45 度
              }
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: groupSales
              }
            ]
          };

          // 库存数据图配置项
          var stockOption = {
            title: {
              text: '商品库存 - ' + firstType
            },
            tooltip: {},
            legend: {
              data: ['库存']
            },
            xAxis: {
              data: groupProductNames,
              axisLabel: {
                rotate: 45 // 让标签倾斜 45 度
              }
            },
            yAxis: {},
            series: [
              {
                name: '库存',
                type: 'bar',
                data: groupStocks
              }
            ]
          };

          // 使用刚指定的配置项和数据显示图表
          salesChart.setOption(salesOption);
          stockChart.setOption(stockOption);
        }
      } else {
        console.error('获取数据失败:', data.msg);
      }
    },
    error: function (error) {
      console.error('请求出错:', error);
    }
  });
</script>
</body>

</html>